/* 
基于 vue2+bootstrap/echarts/dataV 的BI大屏显示页面，基础样式。包括：
色盘
基本重置样式
从quasar借鉴的flex栅格系统，替换bootstrap栅格系统，包括纵向栅格
*/


/* 色盘 */
:root {
  --background-color: #021322;
  --background-image: url('/images/bg.png');
  --main-color: #cef7f0;
  --secondary-color: #33ebca;
  --color-navy: #1ab394;
  --color-blue: #1c84c6;
  --color-lazur: #23c6c8;
  --color-yellow: #f8ac59;
  --color-red: #ed5565;
  --color-black: #262626;
  --color-dark: rgba(4, 25, 37, 1);
  /* card border color */
  --color-darker: rgba(3, 58, 71, 1);
}



/* 基本 */
html,
body {
  width: 100%;
  height: 100%;
}

.full-height {
  height: 100% !important;
}

.ful-width {
  height: 100% !important;
}

/* 颜色 */
.bg-navy {
  background-color: var(--color-navy);
}

.bg-blue {
  background-color: var(--color-blue);
}

.bg-lazur {
  background-color: var(--color-lazur);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

.bg-red {
  background-color: var(--color-red);
}

.bg-dark {
  background-color: var(--color-dark) !important;
}

.bg-black {
  background-color: var(--color-black);
}

.text-navy {
  color: var(--color-navy);
}

.text-blue {
  color: var(--color-blue);
}

.text-lazur {
  color: var(--color-lazur);
}

.text-yellow {
  color: var(--color-yellow);
}

.text-red {
  color: var(--color-red);
}

.text-black {
  color: var(--color-black);
}


/* 栅格，替代bootstrap栅格，有纵向的栅格系统 */
.row,
.column {
  display: flex;
  flex-wrap: wrap;
}

.row {
  margin: 0;
  /* margin-right: -10px;
  margin-left: -10px;*/
}

.column {
  flex-direction: column;
  margin: 0;
  /* margin-top: -10px;
  margin-bottom: -10px; */

}

.row>.col,
.row>.col-auto,
.row>.col-grow,
.row>.col-shrink,
.row>.col-0,
.row>.col-1,
.row>.col-2,
.row>.col-3,
.row>.col-4,
.row>.col-5,
.row>.col-6,
.row>.col-7,
.row>.col-8,
.row>.col-9,
.row>.col-10,
.row>.col-11,
.row>.col-12 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  max-height: 100% !important;
  padding: 0 10px;
}

.column>.col,
.column>.col-auto,
.column>.col-grow,
.column>.col-shrink,
.column>.col-0,
.column>.col-1,
.column>.col-2,
.column>.col-3,
.column>.col-4,
.column>.col-5,
.column>.col-6,
.column>.col-7,
.column>.col-8,
.column>.col-9,
.column>.col-10,
.column>.col-11,
.column>.col-12 {
  height: auto;
  min-height: 0;
  max-height: 100% !important;
  max-width: 100% !important;
  padding: 10px 0;
}

.col {
  flex: 10000 1 0%;
}

.col-auto,
.col-0,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  flex: 0 0 auto;
}

.col-grow {
  flex: 1 0 auto;
}

.col-shrink {
  flex: 0 1 auto;
}

.row>.col-0,
.row>.col-xs-0 {
  height: auto;
  width: 0%;
}

.row>.offset-0 {
  margin-left: 0%;
}

.column>.col-0 {
  height: 0%;
  width: auto;
}

.row>.col-1 {
  height: auto;
  width: 8.3333%;
}

.row>.offset-1 {
  margin-left: 8.3333%;
}

.column>.col-1 {
  height: 8.3333%;
  width: auto;
}

.row>.col-2 {
  height: auto;
  width: 16.6667%;
}

.row>.offset-2 {
  margin-left: 16.6667%;
}

.column>.col-2 {
  height: 16.6667%;
  width: auto;
}

.row>.col-3 {
  height: auto;
  width: 25%;
}

.row>.offset-3 {
  margin-left: 25%;
}

.column>.col-3 {
  height: 25%;
  width: auto;
}

.row>.col-4 {
  height: auto;
  width: 33.3333%;
}

.row>.offset-4 {
  margin-left: 33.3333%;
}

.column>.col-4 {
  height: 33.3333%;
  width: auto;
}

.row>.col-5 {
  height: auto;
  width: 41.6667%;
}

.row>.offset-5 {
  margin-left: 41.6667%;
}

.column>.col-5 {
  height: 41.6667%;
  width: auto;
}

.row>.col-6 {
  height: auto;
  width: 50%;
}

.row>.offset-6 {
  margin-left: 50%;
}

.column>.col-6 {
  height: 50%;
  width: auto;
}

.row>.col-7 {
  height: auto;
  width: 58.3333%;
}

.row>.offset-7 {
  margin-left: 58.3333%;
}

.column>.col-7 {
  height: 58.3333%;
  width: auto;
}

.row>.col-8 {
  height: auto;
  width: 66.6667%;
}

.row>.offset-8 {
  margin-left: 66.6667%;
}

.column>.col-8 {
  height: 66.6667%;
  width: auto;
}

.row>.col-9 {
  height: auto;
  width: 75%;
}

.row>.offset-9 {
  margin-left: 75%;
}

.column>.col-9 {
  height: 75%;
  width: auto;
}

.row>.col-10 {
  height: auto;
  width: 83.3333%;
}

.row>.offset-10 {
  margin-left: 83.3333%;
}

.column>.col-10 {
  height: 83.3333%;
  width: auto;
}

.row>.col-11 {
  height: auto;
  width: 91.6667%;
}

.row>.offset-11 {
  margin-left: 91.6667%;
}

.column>.col-11 {
  height: 91.6667%;
  width: auto;
}

.row>.col-12 {
  height: auto;
  width: 100%;
}

.row>.offset-12 {
  margin-left: 100%;
}

.column>.col-12 {
  height: 100%;
  width: auto;
}

.row>.col-all {
  height: auto;
  flex: 0 0 100%;
}